<template>
  <div class="tableContainer">
    <el-button type="primary" size="small" @click="createForm">创建表单</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="date" label="创建日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column prop="creator" label="创建人"> </el-table-column
      ><el-table-column fixed="right" label="操作" width="240">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="handleCheck(scope.row)"
            >查看</el-button
          >
          <el-button type="info" size="mini" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2022-03-10",
          name: "信息表单",
          creator: "Ultrame",
        },
        {
          date: "2022-03-10",
          name: "基础信息表单",
          creator: "Darling",
        },
      ],
    };
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    createForm() {
      this.$router.push("/editting")
    },
    handleCheck(row) {
      console.log(row);
      this.$router.push({
        path: "/form",
        query: {
          id: 1
        }
      })
    },
    handleEdit(row) {
      console.log(row);
      this.$router.push({
        path: "/editting",
        query: {
          id: 1
        }
      })
    },
    handleDelete(row) {
      console.log(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.tableContainer {
  width: 1124px;
  margin: auto;
  padding: 40px;
  ::v-deep {
    .el-table {
      .el-table__fixed-right {
        height: 100% !important;
      }
      .warning-row {
        background: oldlace;
      }
      .success-row {
        background: #f0f9eb;
      }
    }
  }
}
</style>